import React, {Component} from 'react';
import {
  Card,
  Table,
  message,
  Image
} from 'antd';
import {reqNowPlaying} from '../../api/movies';
import moment from "moment";

// 正在上映
export default class NowPlaying extends Component {
  state = {
    result: [],
    totalCount: 0
  }

  initColumns = () => {
    this.columns = [
      {
        title: '电影名',
        dataIndex: 'movie_name'
      },
      {
        title: '海报',
        dataIndex: 'poster',
        render: (text) => <Image src={text} width={80}/>
      },
      {
        title: '上映时间',
        dataIndex: 'release'
      },
      {
        title: '得分',
        dataIndex: 'score'
      },
      {
        title: '下载时间',
        dataIndex: 'download_time',
        render: (text) => moment(text).format('YYYY-MM-DD HH:MM:SS'),
      },
      {
        title: '更新时间',
        dataIndex: 'update_time',
        render: (text) => moment(text).format('YYYY-MM-DD HH:MM:SS'),
      }
    ]
  }
  UNSAFE_componentWillMount() {
    this.initColumns();
  }

  getNowPlaying = async (data={}) => {
    try {
      const {data: res} = await reqNowPlaying(data);
      this.setState({result: res.items, totalCount: res.total_count})
    } catch (e) {
      message.error(e.data.name || e.data.message);
    }
  }
  onChange = (pagination) => {
    const {current, pageSize} = pagination;
    this.getNowPlaying({page: current, page_size: pageSize});
  }

  componentDidMount() {
    this.getNowPlaying();
  }

  render() {
    const {result, totalCount} = this.state;
    const pagination = {
      defaultPageSize: 10,
      position: ['bottomCenter'],
      showQuickJumper: true,
      total: totalCount,
    }
    return (
      <Card title='正在热映'>
        <Table
          onChange={this.onChange}
          dataSource={result}
          columns={this.columns}
          rowKey='_id'
          pagination={pagination}
          scroll={{x: 800}}
        />
      </Card>
    )
  }
}
